<%@ page import="java.util.List" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreServiceFactory" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreService" %>
<%@ page import="com.google.appengine.api.datastore.Query" %>
<%@ page import="com.google.appengine.api.datastore.Entity" %>
<%@ page import="com.google.appengine.api.datastore.FetchOptions" %>
<%@ page import="com.google.appengine.api.datastore.Key" %>
<%@ page import="com.google.appengine.api.datastore.KeyFactory" %>
<%@ page import="com.google.appengine.api.datastore.Query" %>
<%@ page import="com.google.appengine.api.datastore.Query.FilterOperator" %>


<!-- Redirect to the login page if there is no session created -->
<%
if (session.getAttribute("username") == null) {
	response.sendRedirect("/login.jsp");
}
%>
<html>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Search Results | Media Vault</title>
	
		<!--icon-->
		<link rel="icon" href="images/mv.ico" type="">
		<!--CSS-->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <link rel="stylesheet" href="css/search_results.css" type="text/css" media="screen"/>
        <link href="css/TableStyleCat.css" rel="stylesheet" media="all" />
        
	<body>
		<script type="text/javascript">
		function update(div) {
			var list = div.parentNode.parentNode.childNodes;
			list.item(18).nextSibling.firstChild.style.display = "block";
		}
		function closePopUpWindow(div) {
			var box = div.parentNode.parentNode.parentNode.parentNode;
			box.style.display = "none";
		}
		</script>
    	<div class="header" style="width:800px; margin-top:30px;">
			<h1>Search Results</h1>
		</div></br>
		
		<%
			DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();
			Key accountKey = KeyFactory.createKey("AudioFiles", "mediaFiles");
			
			String selectedType = request.getParameter("mediaType");
			String keyword = request.getParameter("keyword");
			Integer count=0;
			
			Query query;
			{
 				query = new Query("Audio", accountKey).
 						addFilter("user", FilterOperator.EQUAL, (String)session.getAttribute("username")).addSort("mediaName");

			}
			
			List<Entity> uploadedAudioFiles = datastore.prepare(query).asList(FetchOptions.Builder.withLimit(20));
		
			//COUNTING TOTAL NUMBER OF SEARCH RESULTS
			for (Entity file: uploadedAudioFiles) {
				String lowerMediaName = file.getProperty("mediaName").toString().toLowerCase();
				String lowerFileName = file.getProperty("fileName").toString().toLowerCase();
				String lowerAlbum= file.getProperty("album").toString().toLowerCase();
				String lowerDate= file.getProperty("dateCreated").toString().toLowerCase();
				String lowerKeyword = keyword.toLowerCase();
				if ((lowerFileName.indexOf(lowerKeyword)> -1) || (lowerMediaName.indexOf(lowerKeyword)> -1)  || (lowerAlbum.indexOf(lowerKeyword)> -1)  || (lowerDate.indexOf(lowerKeyword)> -1)) {
				count++;
				}
			}
		
		%> 
			
		<div id="results" align="center"> <%
			if(keyword == ""){
				%><p style="color: red;"> Please enter the file name or a key word to search files</p></br><% 
			}
			else{
				%> <p style="/*background:66FF66; background-color:hsla(120,70%,80%,0.3);*/"> 
				Search results for <label style="font-weight: bold;">"<%=request.getParameter("keyword") %>"</label> 
				: <label style="font-weight: bold;"><%=count %></label>
				</p></br> <% 
			} %>
		</div>
			
		<div id="wrapper" style="width:auto; margin:20px 70px 0px 120px; padding:15px;">	
			<table class="table2">
			<thead><!--style="padding:5px; magin:5px;"-->
				<tr>
					<th style="width: 250px;">Name</th>
					<th style="width: 250px;">File Name</th>
					<th style="width: 250px;">Media Size</th>
					<th style="width: 250px;">Date Created</th>
					<th style="width: 250px;">Group By [Album / Folder]</th>
					<th style="width: 200px;">Media Type</th>
					<th><img src="images/trash_bin.png" style="width: 40px; height: 40px; " alt="" /></th>
					<th><img src="images/download.png" style="width: 40px; height: 40px; " alt="" /></th>
					<th><img src="images/upload.png" style="width: 40px; height: 40px; " alt="" /></th>
				</tr>
			</thead>
			<tbody>
			
			<%
			if(keyword == ""){
				%>
				<tr>
					<td colspan="9" scope="row" align="center" width="50%" height="100%" style="padding:20px;"> 
						<img alt="" src="/images/search_results.png" width="60" height="60"></br>
						No files found
					</td>
				</tr>
				<%
			}
			else if (uploadedAudioFiles.isEmpty() && keyword != "") {
					%>
					<tr>
						<td colspan="9" scope="row" align="center" width="50%" height="100%" style="padding:20px;"> 
							<img alt="" src="/images/search_results.png" width="60" height="60"></br>
							No search results found for "<%=request.getParameter("keyword") %>"
						</td>
					</tr>
					<%				
				} else {
					
					for (Entity file: uploadedAudioFiles) {
						
						//ADD MORE LINES OF CODE TO SEARCH MORE ATTRIBUTES (eg. Searching in the artist, song, etc.)
						String lowerMediaName = file.getProperty("mediaName").toString().toLowerCase();
						String lowerFileName = file.getProperty("fileName").toString().toLowerCase();
						String lowerAlbum= file.getProperty("album").toString().toLowerCase();
						String lowerDate= file.getProperty("dateCreated").toString().toLowerCase();
						
						String lowerKeyword = keyword.toLowerCase();
						if ((lowerFileName.indexOf(lowerKeyword)> -1) || (lowerMediaName.indexOf(lowerKeyword)> -1) || (lowerAlbum.indexOf(lowerKeyword)> -1)  || (lowerDate.indexOf(lowerKeyword)> -1)) {
						String keyParameter = KeyFactory.keyToString(file.getKey());
							Integer fileSize = Integer.parseInt(file.getProperty("fileSize").toString());
							%>
							<tr style="padding:5px;">
								<td align="left"><%= file.getProperty("mediaName") %></td>
								<td align="left"><%= file.getProperty("fileName") %></td>
								<td align="center"><%= fileSize/1024 %> kB</td>
								<td align="center"><%= file.getProperty("dateCreated") %></td>
								<td align="center"><%= file.getProperty("album") %></td>
								<td align="center"><%= file.getProperty("contentType") %></td>
								<td align="center"><a type="button" href="/delete?entityKey=<%= keyParameter %>">Delete</a></td>
								<td align="center"><a href="/download?entityKey=<%= keyParameter %>">Download</a></td>
								<td align="center"><a href="#" onclick="update(this)">Edit</a></td>
								<td><div class="wrapper" style="display: none">
			    					<div id="updateBox"></div>
				   					<div id="updateFile">
										<h3>Update File</h3>
										<div id="leftSide">
											<img src="images/upload.png" alt="" style="width: 148px; height: 148px;" />
										</div>
										<form method="post" action="/update?entityKey=<%= keyParameter %>">
											<div class="inputSection">Media Name: <input id="mediaNameID" type="text" name="name" value="<%= file.getProperty("mediaName") %>" /></div>
											<%
											if (file.getProperty("contentType").equals("video")) {
												%>
												<div class="inputSection">Genre: <input id="genreID" type="text" name="genre" value="<%= file.getProperty("genre") %>" /></div>
												<div class="inputSection">Year: <input id="yearID" type="text" name="year" value="<%= file.getProperty("year") %>" /></div>
												<div class="inputSection">Collection: <input id="collectionID" type="text" name="collection" value="<%= file.getProperty("collection") %>" /></div>
												<%
											} else if (file.getProperty("contentType").equals("audio")) {
												%>
												<div class="inputSection">Artist: <input id="artistID" type="text" name="artist" value="<%= file.getProperty("artist") %>" /></div>
												<div class="inputSection">Album: <input id="albumID" type="text" name="album" value="<%= file.getProperty("album") %>" /></div>
												<div class="inputSection">Genre: <input id="genreID" type="text" name="genre" value="<%= file.getProperty("genre") %>" /></div>
												<%
											} else {
												%>
												<div class="inputSection">Album: <input id="albumID" type="text" name="album" value="<%= file.getProperty("album") %>" /></div>
												<%
											}
											%>
											<div style="float:left; margin:10px 20px 0px 0px;">
												<button type="submit" name="btnUpdate">Update File</button>
											</div>
											<div style="float:left; margin-top:10px;">
												<button type="button" onClick="closePopUpWindow(this)">Cancel</button>
											</div>
										</form>
									</div>
								</div></td>
							</tr>
							<%
						}
					}
				}
			%>
			</tbody>
			</table>
		</div>
	</body>
</html>